<template>
  <div class="test1main">
    <el-row>
      <el-col :span="8"><dv-decoration-8 style="width: 300px; height: 50px" /></el-col>
      <el-col :span="8"><dv-decoration-7 style="height: 50px; color: white">上海干巷车镜实业有限公司</dv-decoration-7></el-col>
      <el-col :span="8"><dv-decoration-8 :reverse="true" style="width: 300px; height: 50px; float: right" /></el-col>
    </el-row>
    <digitalFlop />
    <el-row>
      <el-col :span="12">
        <div class="table">
          <div class="rose-chart-title">机器</div>
          <dv-scroll-board :config="config" style="height: 300px" />
        </div>
      </el-col>
      <el-col :span="12" class="usePecent">
        <div class="title">利用率</div>
        <dv-border-box-1><dv-charts :option="weekUsePercent" style="height: 300px" /></dv-border-box-1>
        <dv-border-box-1><dv-charts :option="weekUsePercent" style="height: 300px" /></dv-border-box-1>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import digitalFlop from './digitalFlop'
export default {
  data() {
    return {
      config: {
        header: ['设备名称', '工作模式', '订单', '计划产出', '产品名称', '完成%', '已完成', '废品', '停工时间'],
        data: [
          ['1', '1', '1', '1,', '1', '1', '1,', '1', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
          ['1', '1', '1', '1,', '1', '1', '1,', '1'],
        ],

        columnWidth: [1],
        align: ['left'],
        rowNum: 7,

        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)',
        columnWidth: 4,
      },
      weekUsePercent: {
        title: {
          text: '最近一周机器利用总率',
          style: {
            fill: '#fff',
            fontSize: 15,
          },
        },
        legend: {
          data: ['周'],
          textStyle: {
            fill: '#fff',
          },
        },
        xAxis: {
          name: '周',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

          axisLine: {
            style: {
              stroke: '#fff',
            },
          },
          axisLabel: {
            style: {
              fill: '#fff',
            },
          },
        },
        yAxis: {
          name: '利用总率',
          data: 'value',
          axisLabel: {
            style: {
              fill: '#fff',
            },
          },
          nameTextStyle: {
            color: '#fff',
          },
        },
        series: [
          {
            data: [0, 0, 0, 31, 32, 36, 56],
            type: 'line',
            smooth: true,
            name: '周',
          },
        ],
      },
    }
  },
  components: {
    digitalFlop,
  },
  methods: {},
}
</script>

<style rel="stylesheet/scss" lang="scss">
.test1main {
  background-color: black;
   .dv-scroll-board .header{
    font-size: 12px;
  }
  .table {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, 0.5);
    .rose-chart-title {
      height: 50px;
      font-weight: bold;
      text-indent: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;
      color: white;
    }
  }
  .usePecent {
    color: white;
    .title {
      height: 50px;
      font-weight: bold;
      text-indent: 20px;
      font-size: 20px;
      display: flex;
      align-items: center;
    }
 
  }
}
</style>
